<template>
  <div class="wrapper">
    <!--头部-->
    <div id="header">
      <img src="../assets/img/logo.png" width="30" height="33"/>石家庄G+BOSS
      <div class="menu">
        <el-dropdown trigger="click">
					<span class="el-dropdown-link" style="cursor: pointer;">
				    {{userName}}&nbsp;<i class="el-icon-caret-bottom el-icon--right"></i>
				  </span>
          <el-dropdown-menu slot="dropdown">
            <span @click="dialogFormVisible = true"><el-dropdown-item><i
              class="iconfont el-icon-edit"></i>修改密码</el-dropdown-item></span>
            <span @click="logout"><el-dropdown-item><i class="iconfont el-icon-circle-cross"></i>退出</el-dropdown-item></span>
          </el-dropdown-menu>
        </el-dropdown>
        <el-dialog title="修改密码" :visible.sync="dialogFormVisible">
          <el-form :model="form" label-position="right" :rule='rule' ref='ruleForm'>
            <el-form-item label="旧密码" :label-width="formLabelWidth">
              <el-input v-model.trim="form.oldPwd" auto-complete="off" placeholder="请输入旧密码"></el-input>
            </el-form-item>
            <el-form-item label="新密码" :label-width="formLabelWidth" prop='pass'>
              <el-input v-model.trim="form.newPwd" auto-complete="off" placeholder="请输入新密码"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" :label-width="formLabelWidth" prop='checkPass'>
              <el-input v-model.trim="form.newPwdAgain" auto-complete="off" placeholder="请输入新密码"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">            
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="modifyPwd">确 定</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
    <div id="container">
      <!--侧导航-->
      <div id="menu">
        <el-menu :default-active="$route.path" class="el-menu-vertical-demo" @open="" @close="" theme="" unique-opened router>
          <template v-for="(item,index) in $router.options.routes" v-if="!item.hidden">
						<el-submenu :index="index+''" v-if="!item.leaf">
							<template slot="title"><i :class="['iconfont',item.iconCls]"></i>{{item.name}}</template>
							<el-menu-item v-for="child in item.children" :index="child.path" :key="child.path" v-if="!child.hidden">{{child.name}}</el-menu-item>
						</el-submenu>
						<el-menu-item v-if="item.leaf&&item.children.length>0" :index="item.children[0].path"><i :class="['iconfont',item.iconCls]"></i>{{item.children[0].name}}</el-menu-item>
					</template>         
        </el-menu>
      </div>
      <!--主体内容-->
      <div id="content">
        <!--路由内容-->
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
	import {
		getData
	} from '../common/js/public.js'
	export default {
		name: 'index',
		data () {
			var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.form.newPwdAgain !== '') {
            this.$refs.ruleForm.validateField('checkPass');
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.form.newPwd) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
			return {
				userName: sessionStorage.userName,
				dialogFormVisible: false,
				form: {
					name: '',
					region: '',
					date1: '',
					newPwd: '',
					newPwdAgain: '',
					oldPwd: '',
					userId: sessionStorage.userId,
					token: sessionStorage.token,
					date2: '',
					delivery: false,
					type: [],
					resource: '',
					desc: ''
				},
				formLabelWidth: '80px',
				rule: {
          pass: [
            { validator: validatePass, trigger: 'blur' }
          ],
          checkPass: [
            { validator: validatePass2, trigger: 'blur' }
          ]
        }
			}
		},
		methods: {
			logout () {
				this.$confirm('是否退出?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					let opt = {
						url: '/gplus/login/logout',
						data: {
							userId: this.form.userId,
							token: this.form.token
						},
						success: (res) => {
							this.$message({
								type: 'success',
								message: '退出成功!'
							});
							sessionStorage.clear();		
							this.$router.replace({
								path: '/'
							});
						}
					};
					getData(opt);
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消退出'
					});
				});
			},
			modifyPwd () {
				 this.$refs.ruleForm.validate((valid) => {
          if (valid) {
            let opt = {
						url: '/gplus/user/changePwd',
						data: {
							userId: this.form.userId,
							newPwd: this.form.newPwd
						},
						success: (res) => {
							this.$message({
								type: 'info',
								message: '密码修改成功，请重新登录'
							});
							this.dialogFormVisible = false;
							this.$router.replace('/');
						},
						fail: (res) => {
							this.$alert(res.msg, '提示', {
								confirmButtonText: '确定'
							});
						}
					};
					getData(opt);
          } else {
            console.log('error submit!!');
            return false;
          }
        });
			}
		},
		created () {

		},
		mounted () {
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus" rel="stylesheet/stylus">
  .wrapper
    height: 100%;
    width: 100%;    
    position: relative;
    #header
      img
        vertical-align: middle;
        margin-right: 20px;
      .menu
        float: right;
        font-family: PingFangSC-Regular;
        font-size: 14px;
        .el-dropdown-link
          color: #fff;
          .el-icon-caret-bottom
            font-size: 12px;
      position: absolute;
      width: 100%;
      height: 56px;
      line-height: 56px;
      background: #324057;
      color: #fff;
      font-size: 20px;
      letter-spacing: 0;
      padding: 0 20px;
      box-sizing: border-box;
    #container
      padding-top: 56px;
      height: 100%;
      box-sizing: border-box;
      #menu
        .iconfont
          margin-right: 10px;
          font-size: 14px;
        height: 100%;
        width: 200px;
        float: left;
        box-sizing: border-box;
        background: #EFF2F7;
      #content
        box-sizing: border-box;
        height: 100%;
        min-height: 500px;
        margin-left: 200px;
        padding: 20px;
        overflow: auto;
</style>
